import { Component, OnInit } from '@angular/core';
import { BaseFieldComponent } from '../base-field/base-field.component';
import { EChartsOption } from 'echarts';
import { PermitConfig } from '../../../models';
// import { EChartsOption } from 'echarts'

@Component({
  selector: 'zepride-chart-radar',
  templateUrl: './chart-radar.component.html',
  styleUrls: ['./chart-radar.component.less']
})
export class ChartRadarComponent extends BaseFieldComponent implements OnInit {


  width = '400px';
  option: EChartsOption = {};
  permitConfig: PermitConfig[] = [
    { mode: 'query', permitId: '查看', permitName: '', authObjectId: '' }
  ];

  ngOnInit(): void {
    this.initValue();
    this.initOption();
  }

  initOption() {
    this.option = {
      legend: {
        data: ['数据一', '数据二'],
        orient: 'vertical',
        left: '5%',
        top: '5%',
        itemWidth: 13,
        itemGap: 16,
      },
      grid: {
        top: '5%',
        left: '15%'
      },
      radar: {

        splitNumber: 4,
        indicator: [
          {
            name: '1', min: 0, max: 80, axisLabel: {
              show: true,
            },
          },
          { name: '2', max: 80 },
          { name: '3', max: 80 },
          { name: '4', max: 80 },
          { name: '5', max: 80 },
          { name: '6', max: 80 },
          { name: '7', max: 80 },
          { name: '8', max: 80 },
          { name: '9', max: 80 },
          { name: '10', max: 80 },
        ],
        axisTick: {
          show: false
        },

        splitArea: {
          show: false // 是否显示分隔区
        }
      },
      series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data: [
          {
            value: [20, 50, 46, 35, 50, 19, 28, 28, 80, 30],
            name: '数据一',
            itemStyle: {
              color: '#49CFA8'
            },
          },
          {
            value: [20, 40, 37, 45, 46, 35, 50, 19, 28, 76],
            name: '数据二',
            itemStyle: {
              color: 'yellow'
            },
          }
        ],

      }]
    };
  }
  initValue() {
    if (this.componentData.extends && this.componentData.extends.width) {
      if (this.componentData.extends.width === 'half') {
        this.width = '400px';
      } else {
        this.width = '500px';
      }
    }
  }

}
